<template>
  <section>
    <section class="sec-box fixed-top h-screen bg-black news-home">
      <ul class="card-box flex-sc">
        <li class="card-item auto"><h1>News Center</h1></li>
        <li>
          <article class="card-item flex-cc">
            Explore our webpage to stay updated on our latest developments, industry news, customer success stories, and upcoming events that you won't want to
            miss. Get an inside look at our company and stay informed with all the latest happenings in one convenient place.
          </article>
        </li>
      </ul>
    </section>
    <section class="sec-box min-h-screen flex-cc news-event">
      <div class="news-event-swiper-container">
        <h2 class="margin-bottom-middle">Press & Media</h2>
        <Swiper :slidesPerView="'auto'" :spaceBetween="30">
          <SwiperSlide v-for="(item, index) in list" :key="index">
            <dl class="new-event-dl" @click.stop="doDetail(item)">
              <dt>
                <img v-if="item.imageUrl" width="100%" :src="item.imageUrl" />
              </dt>
              <dd class="margin-top margin-bottom">
                <h3>{{ item.title || '' }}</h3>
              </dd>
              <dd>{{ item.alt || '' }}</dd>
            </dl>
          </SwiperSlide>
        </Swiper>
      </div>
    </section>
  </section>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue'

import HttpServer from '@/utils/http'
import { newsManageAPI } from '@/config/api'
import { NewsCategory, NewsUrlCategory } from '@/constants/news'
import imgDefault from '@images/logo.png'

export default {
  name: 'cmpts-apps',
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      imgDefault,
      NewsCategory,
      NewsUrlCategory,
      list: [],
    }
  },
  created() {
    this.queryData()
  },
  methods: {
    async queryData() {
      const { code, data } = await HttpServer.get(newsManageAPI.getList, {
        current: 1,
        size: 10,
        title: '',
        category: NewsCategory.PM.value,
      })
      if (code == 200) {
        this.list = data.records
      }
    },
    doDetail(item) {
      if (item.urlType == NewsUrlCategory.self.value) {
        this.$router.push({
          path: `/news/${item.id}`,
        })
      } else {
        if (item.url) window.open(item.url)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.news-home {
  background: url('@images/product-probes-bg.png') center / cover no-repeat;
  .card-box {
    position: absolute;
    bottom: 5%;
    left: 5%;
    width: 80%;
  }
  article {
    padding: @normal @normal * 2;
    width: 30rem;
    background-color: #030303;
  }
}
</style>
